<template>  <!-- 取消预约并退款 -->
	<view>
		<view class="view1">
			<view class="view1-1">
				<text>订单编号：{{arr.order_orderId}}</text>
			</view>
			<view class="view1-2">
				<view>
					<text>{{arr.order_orderId}}</text>
					<text>￥{{arr.contentPrice}}</text>
				</view>
				<view >
					<text>{{arr.phy_projectName}}</text>
					<text>￥{{arr.phy_salePrice}}</text>
				</view>
				<view>
					<text style="color:red">合计</text>
					<text style="color:red">￥{{sum}}</text>
				</view>
			</view>
		</view>
		<view class="view2">
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
							<text>{{item.name}}</text>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		
		<view class="view3">
			<button type="primary" plain="true" @click="cancel(id)" style="color: white;">取消预约并退款</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:'',
				sum:'',
				arr:[],
				current: 0,
				items:[{
                    value: 1,
                    name: '买错了'
                },
                {
                    value: 2,
                    name: '计划有变，没时间体检',
                },
                {
                    value: 3,
                    name: '评价不好'
                },
                {
                    value: 4,
                    name: '有其他更好的选择'
                },
                {
                    value: 5,
                    name: '其他'
                }
				]
			}
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			cancel(b){
				uni.navigateTo({
					url:'/pages/HXM/CancelRefundDetails/CancelRefundDetails',
				})
				this.$http({   //取消预约
					url:"/cancalorder",
					data:{
						order_orderId:value,
						order_status:3
					}
				}).then((res)=>{
					console.log(res)				
				})
				
			}
		},
		mounted(){
			const value = uni.getStorageSync('id')
			this.$http({   //获取我的体检详细
				url:"/getaccomplishphysical",
				data:{
					order_orderId:value
				}
			}).then((res)=>{
				console.log(res)
				this.arr=res.data[0]
				this.sum=this.arr.contentPrice+this.arr.phy_salePrice
			})
		},
	}
</script>

<style lang="less">
	body{
		background: #F8F8F8;
	}
	
	.view1{
		font-size: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background: white;
		margin: 20rpx;
		.view1-1{
			display: flex;
			padding: 30rpx;
			justify-content: space-between;
		}
		.view1-2{
			padding: 30rpx;
			border: 2rpx solid #C1C1C1;
			border-radius: 10rpx;
			view{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				height: 20px;
				text{
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.view2{
		font-size: 30rpx;
		margin: 20rpx;
		.uni-list{
			border: 2rpx solid #C1C1C1;
			border-radius: 10rpx;
			padding: 20rpx;
			view{
				margin-top: 20rpx;
				radio{
					transform:scale(0.6)
				}
			}
		}
	}
	
	.view3{
		display: flex;
		width: 100%;
		justify-content: center;
		position: fixed;
		background: #59B58D;
		bottom: 0;
		left: 0;
		button{
			width: 100%;
			border: 1px solid #59B58D;
			background: #59B58D;
			border-radius: 0;
		}
	}
</style>
